Ajax এবং HTML5 ব্যবহার করে Multiple File Upload এবং Progress Bar তৈরি করা একটি অত্যন্ত কার্যকর পদ্ধতি, যা ব্যবহারকারীদের পেজ রিফ্রেশ ছাড়াই একাধিক ফাইল আপলোড করার সুযোগ দেয়। Ajax এর মাধ্যমে ফাইল আপলোড করার সময় প্রগ্রেস বার ব্যবহার করা হয়, যা আপলোডের স্ট্যাটাস রিয়েল-টাইমে প্রদর্শন করে। নিচে একটি উদাহরণসহ Ajax এর মাধ্যমে Multiple File Upload এবং Progress Bar কিভাবে কাজ করে তা আলোচনা করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload with Progress Bar</title>
</head>
<body>
<h1>Upload Multiple Files</h1>
<form id="uploadForm">
<label for="files">Choose files:</label>
<input type="file" id="files" name="files[]" multiple required>
<br><br>
<button type="button" onclick="uploadFiles()">Upload</button>
</form>
<div id="progress-container" style="display: none;">
<p>Uploading...</p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function uploadFiles() {
var filesInput = document.getElementById('files');
var files = filesInput.files;
if (files.length === 0) {
document.getElementById("response-container").innerHTML = "Please select at least one file to upload.";
return;
}
// FormData অবজেক্ট তৈরি করা এবং ফাইলগুলো অ্যাড করা
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files[]", files[i]);
}
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "upload_multiple_files.php", true);
// প্রগ্রেস ইভেন্ট হ্যান্ডল করা
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").value = percentComplete;
document.getElementById("progress-container").style.display = "block";
}
};
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error uploading files.";
}
document.getElementById("progress-container").style.display = "none";
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<input type="file">) এবং একটি আপলোড বোতাম (<button>) রয়েছে। এখানে multiple অ্যাট্রিবিউট ব্যবহার করে ব্যবহারকারীকে একাধিক ফাইল সিলেক্ট করার অনুমতি দেওয়া হয়েছে।uploadFiles() ফাংশন কল হবে, যা FormData অবজেক্ট তৈরি করে এবং Ajax এর মাধ্যমে ফাইলগুলো সার্ভারে পাঠাবে।<progress>) ব্যবহার করা হয়েছে। এটি আপলোড প্রগ্রেস রিয়েল-টাইমে দেখায়।<?php
// চেক করা হচ্ছে যে ফাইল আপলোড করা হয়েছে কিনা
if (isset($_FILES['files'])) {
$files = $_FILES['files'];
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
$responses = [];
for ($i = 0; $i < count($files['name']); $i++) {
$fileName = $files['name'][$i];
$fileTmpName = $files['tmp_name'][$i];
$uploadPath = $uploadDir . basename($fileName);
// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($fileTmpName, $uploadPath)) {
$responses[] = "File uploaded successfully: " . $fileName;
} else {
$responses[] = "Error uploading file: " . $fileName;
}
}
// রেসপন্স তৈরি করা
echo implode("<br>", $responses);
} else {
http_response_code(400); // Bad Request
echo "No files were uploaded.";
}
?>
বিস্তারিত ব্যাখ্যা:
$_FILES এর মাধ্যমে আপলোড করা হয়েছে কিনা।uploads/ নামে একটি ডিরেক্টরি চেক করা হয়েছে এবং সেটি না থাকলে তৈরি করা হয়েছে।for লুপ ব্যবহার করে প্রতিটি ফাইলের টেম্পোরারি লোকেশন থেকে আপলোড ডিরেক্টরিতে মুভ করা হয়েছে।$responses) তে সংরক্ষণ করা হয়েছে এবং শেষে তা আউটপুট করা হয়েছে।JavaScript এবং HTML5:
uploadFiles() ফাংশন কল হয়।FormData অবজেক্ট ব্যবহার করে ফাইলগুলো অ্যাড করা হয় এবং তা XMLHttpRequest এর মাধ্যমে সার্ভারে পাঠানো হয়।PHP স্ক্রিপ্ট:
Progress Bar:
xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।FormData এবং XMLHttpRequest ব্যবহার করে একাধিক ফাইল আপলোড করা হয়েছে।এই উদাহরণটি অনুসরণ করে Ajax এবং HTML5 ব্যবহার করে Multiple File Upload এবং Progress Bar কিভাবে কাজ করে তা বোঝা যায়। এটি একটি অত্যন্ত গুরুত্বপূর্ণ দক্ষতা, যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে প্রয়োজনীয়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
